[V0_FILE]typescriptreact:file="components/kokonutui/toolbar.tsx" isEdit="true" isQuickEdit="true" "use client" import * as React from "react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" import { Filter, Settings, Download, Share2, type LucideIcon, User, Bell, Sun, Edit2, Lock } from "lucide-react" interface ToolbarItem { id: string title: string icon: LucideIcon type?: never } interface ToolbarProps { className?: string activeColor?: string onSearch?: (value: string) => void } const buttonVariants = { initial: { gap: 0, paddingLeft: ".5rem", paddingRight: ".5rem", }, animate: (isSelected: boolean) => ({ gap: isSelected ? ".5rem" : 0, paddingLeft: isSelected ? "1rem" : ".5rem", paddingRight: isSelected ? "1rem" : ".5rem", }), } const spanVariants = { initial: { width: 0, opacity: 0 }, animate: { width: "auto", opacity: 1 }, exit: { width: 0, opacity: 0 }, } const notificationVariants = { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: -10 }, exit: { opacity: 0, y: -20 }, } const lineVariants = { initial: { scaleX: 0, x: "-50%" }, animate: { scaleX: 1, x: "0%", transition: { duration: 0.2, ease: "easeOut" }, }, exit: { scaleX: 0, x: "50%", transition: { duration: 0.2, ease: "easeIn" }, }, } const transition = { type: "spring", bounce: 0, duration: 0.4 } export function Toolbar({ className, activeColor = "text-primary", onSearch }: ToolbarProps) { const [selected, setSelected] = React.useState("filter") const [isToggled, setIsToggled] = React.useState(false) const [activeNotification, setActiveNotification] = React.useState(null) const outsideClickRef = React.useRef(null) const toolbarItems: ToolbarItem[] = [ { id: "filter", title: "Filter", icon: Filter }, { id: "settings", title: "Settings", icon: Settings }, { id: "download", title: "Download", icon: Download }, { id: "share", title: "Share", icon: Share2 }, { id: "notifications", title: "Notifications", icon: Bell }, { id: "profile", title: "Profile", icon: User }, { id: "theme", title: "Theme", icon: Sun }, ] const handleItemClick = (itemId: string) => { setSelected(selected === itemId ? null : itemId) setActiveNotification(itemId) setTimeout(() => setActiveNotification(null), 1500) } return (

{activeNotification && (

{toolbarItems.find((item) => item.id === activeNotification)?.title} clicked!

)}

{toolbarItems.map((item) => ( handleItemClick(item.id)} transition={transition} className={cn( "relative flex items-center rounded-none px-3 py-2", "text-sm font-medium transition-colors duration-300", selected === item.id ? "bg-[#1F9CFE] text-white rounded-lg" : "text-muted-foreground hover:bg-muted hover:text-foreground", )} > {selected === item.id && ( {item.title} )} ))} setIsToggled(!isToggled)} className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-xl border border-primary/30 shadow-sm transition-all duration-200 hover:shadow-md hover:bg-primary/90 hover:border-primary/40 active:border-primary/50" > {isToggled ? : } {isToggled ? "On" : "Off"}

) } export default Toolbar

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This